<script setup>
import Footer from "@/components/Footer.vue";
import router from "@/router";
import { onMounted } from "vue";
import { ref } from "vue";
import { hospitalInfoService } from "@/api/hospital";
import Echarts from "@/views/Echarts.vue";
const hospital=ref([]);
const showRank=ref(false);
onMounted(async () => {
 // await getHospitalInfo();
});



function toSetmeal(index) {
  //console.log(hospital.value[index].hpId)
  console.log(index)
  router.push({
    path:"/hospital",
    query:{
        familyid:familylist.value[index].id
    }
  });
}



const familylist=ref([
    {
        id:1,
        name: '张三',
        age: '18',
        sex: '男',
        IDCard:'12345678901',
        phone:'123'
        },
    {
        id:2,
        name: '李四',
        age: '18',
        sex: '女',
        IDCard:'12345678901',
        phone:'123'
    }
    
])
</script>
<template>

  <!-- 总容器 -->
  <div class="wrapper">

    <header>
      
      <i class="fa fa-angle-left" onclick="history.go(-1)"></i>

      <el-dialog v-model="showRank" style="width: 360px;height:1000px">
        <Echarts></Echarts>
      </el-dialog>
      <p>请您选择需要预约的家属</p>
      <div></div>
      <div></div>
      <div></div><div></div><div></div>
    </header>
    <div class="top-ban"></div>

    <ul class="hospital" v-loading="familylist.length === 0">
      <el-empty v-show="familylist.length === 0"/>
      <li v-for="(item, index) in familylist" :key="index">
        <h3 @click="toSetmeal(index)">
          {{item.name}}
          <i class="fa fa-angle-right"></i>
        </h3>
        <div class="hospita-info" >
          <table>
            <tr>
              <td>age</td>
              <td>{{item.age}}</td>
            </tr>
            <tr>
              <td>身份证号</td>
              <td>{{item.IDCard}}</td>
            </tr>
            <tr>
              <td>性别</td>
              <td>{{ item.sex }}</td>
            </tr>
            <tr>
              <td>电话</td>
              <td>{{item.phone}}</td>
            </tr>
          </table>
        </div>
       
      </li>
    </ul>

    <div class="bottom-ban"></div>
    <Footer> </Footer>
  </div>
</template>

<style scoped>
@import "@/assets/css/hospital.css";
@import "@/assets/framework/reset.css";
@import "@/assets/framework/font-awesome/css/font-awesome.min.css";
</style>
